import axios from 'axios';
import React, { useState, useRef, useEffect } from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom'
const App = () => {
  // hooks 使用state
  // 语法：const [变量, 方法] = useState(初始值)
  const [count, setCount] = useState(0)
  const [list, setList] = useState([])
  // hooks 使用ref
  const ipt = useRef(null)
  // hook effect 副作用
  // 挂载完毕 副作用函数执行一次  类似 componentDidMount
  // 当我们依赖的数据发生了改变, 副作用函数会再一次执行 componentDidUpdate
  // 当我们的组件被销毁的时候 会执行副作用函数的返回值  类似 componentUnMount
  // 语法： useEffect(() => {}, [依赖的数据])

  // 路由hooks
  const history = useHistory()
  const location = useLocation()
  const param = useParams()
  // history.push({ pathname: '/login' })


  useEffect(() => { 
    axios.get('/api/list').then(resp => {
      setList(resp.data.list)
    })

    return () => {

    }
  }, [count])



  // 方法
  function handleAdd() {
    const value = ipt.current.value

    const newList = list.concat(value)
    setList(newList)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>


      <input type="text" ref={ipt} />
      <button onClick={handleAdd}>添加</button>

      <ul>
        {
          list.length > 0 && list.map((v, i) => {
            return <li key={i}>{v}</li>
          })
        }
      </ul>
    </div>
  );
}

export default App;
